<div class="card border-danger mb-3">
  <div class="card-header bg-danger text-white">危险操作</div>
  <div class="card-body">
    <div class="d-flex">
      <div class="flex-shrink-0">
        <%= image_tag "icons/danger.png", size: "50x50", class: "mr-3" %>
      </div>
      <div class="flex-grow-1 ms-3">
        <h5 class="card-title mb-1">删除标签(版本)</h5>
        <p class="card-text">
          请注意，这不仅会删除引用，还会删除实际内容！
          <br /><br />
          例如，当您有 <strong>latest</strong> 和 <strong>v1.2.3</strong> 都指向同一个镜像时，<br />
          删除 <strong>latest</strong> 也会永久删除 <strong>v1.2.3</strong>。
        </p>

        <button type="button" class="btn btn-danger px-4" data-bs-toggle="modal" data-bs-target="#delete-dialog">
          删除
        </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="delete-dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5 text-danger">你确定吗？</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>你真的想要删除以下标签吗？</p>
        <p class="font-monospace"><%= @tag.name %></p>
        <p>请输入下方标签名称以确认：</p>
        <p><%= text_field_tag :delete_confirm, nil, class: "form-control", data: { expected: @tag.name }, placeholder: "在此处输入标签名称" %></p>
        <p>输入后将启用<strong>删除</strong>按钮。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
        <%= link_to "删除", tag_path(@repository.name, @tag.name), data:{turbo_method: :delete}, id: "delete-button", class: "btn btn-danger disabled" %>
      </div>
    </div>
  </div>
</div>
